<script setup lang="ts">
import { getTaskProcessDataApi } from "@/api/task"
import { TrainProcessEvaData } from "@/api/task/types/task"
import { LineOptionStrategy } from "@/components/Charts"
import { useECharts } from "@/hooks/useECharts"
import { LineSeriesOption } from "echarts"
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"

interface Props {
  id: string | undefined
  taskStatus: number | undefined
}
const props = defineProps<Props>()

let timer: number | null = null
const taskId = ref<string | undefined>(props.id)
const taskStatus = ref<number | undefined>(props.taskStatus)
const RewardElRef = ref<HTMLElement | null>(null)
const WinRateElRef = ref<HTMLElement | null>(null)
const state = reactive<{
  round: number[]
  reward: number[]
  winRate: number[]
}>({
  round: [],
  reward: [],
  winRate: []
})
const RewardChart = useECharts(
  RewardElRef,
  new LineOptionStrategy().getOptions({
    title: {
      text: "奖励变化曲线"
    },
    xAxis: {
      name: "轮数",
      data: state.round
    },
    yAxis: {
      name: "奖励值"
    },
    series: [
      {
        data: state.reward
      }
    ]
  })
)
const WinRateChart = useECharts(
  WinRateElRef,
  new LineOptionStrategy().getOptions({
    title: {
      text: "胜率变化曲线"
    },
    xAxis: {
      name: "轮数",
      data: state.round
    },
    yAxis: {
      name: "胜率"
    },
    series: [
      {
        data: state.winRate
      }
    ]
  })
)
const getTaskProcessData = () => {
  state.round = []
  state.reward = []
  state.winRate = []
  getTaskProcessDataApi(taskId.value as string)
    .then(({ data }) => {
      data.forEach((item) => {
        state.round.push(item.round)
        const processEva: TrainProcessEvaData = JSON.parse(item.process_eva)
        state.reward.push(processEva.reward)
        state.winRate.push(processEva.win_rate)
      })
    })
    .finally(() => {
      RewardChart.options.series && ((RewardChart.options.series as LineSeriesOption[])[0].data = state.reward)
      // @ts-ignore
      RewardChart.options.xAxis && (RewardChart.options.xAxis.data = state.round)
      WinRateChart.options.series && ((WinRateChart.options.series as LineSeriesOption[])[0].data = state.winRate)
      // @ts-ignore
      WinRateChart.options.xAxis && (WinRateChart.options.xAxis.data = state.round)
    })
}
const resize = () => {
  RewardChart.handleResize()
  WinRateChart.handleResize()
}

watch(
  () => props.taskStatus,
  () => {
    taskStatus.value = props.taskStatus
    getTaskProcessData()
  }
)

onMounted(() => {
  getTaskProcessData()
  timer = Number(
    setInterval(() => {
      console.log(taskStatus.value)
      if (taskStatus.value == 1) {
        getTaskProcessData()
      }
    }, 1000 * 60)
  )
})
onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

defineExpose({ resize })
</script>

<template>
  <el-row :gutter="40">
    <el-col class="mb-6" :xl="12" :lg="14" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="RewardElRef" class="chart-card" />
      </el-card>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="10" :md="24" :sm="24" :xs="24">
      <div class="chart-describe">
        <span class="title">奖励变化曲线</span>
        <p class="describe">
          反映智能体完成期望任务的水平。奖励对智能体做出引导，合适的算法设计能够让智能体获得较高的奖励。一般在训练后期，奖励会趋于稳定。
        </p>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col class="mb-6" :xl="12" :lg="10" :md="24" :sm="24" :xs="24">
      <div class="chart-describe">
        <span class="title">胜率变化曲线</span>
        <p class="describe">反映红方的获胜局数比例，每100轮次进行统计。一般胜率曲线与奖励曲线走势相仿。</p>
      </div>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="14" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="WinRateElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
@import url("/src/styles/custom.scss");

.chart-card {
  height: calc(100vh - 530px);
  width: 100%;
  min-height: 300px;
}
</style>
